<!-- 计价 -->
<template>
	<view>
		<u-popup :show="true" mode="center" :round="7">
			<view class="popup-view">
				<view class="title">
					计价
				</view>

				<view class="content">
					<view class="form-view">
						<!-- <view class="form-item flex">
							<view class="flex m-r-10">
								<view class="label">
									标签空差
								</view>
								<view class="value">
									<u--input
									    border="surround"
									  ></u--input>
								</view>
							</view>
							<view class="flex">
								<view class="label">
									标签数量
								</view>
								<view class="value">
									<u--input
									    border="surround"
									  ></u--input>
								</view>
							</view>
						</view>
						<view class="form-item flex">
							<view class="flex m-r-20">
								<view class="label">
									空差
								</view>
								<view class="value" style="width: 410rpx;">
									<view class="list flex">
										<view class="item active">+</view>
										<view class="item">-</view>
										<view class="item">x</view>
										<view class="item">➗</view>
									</view>
								</view>
							</view>
							<view class="flex">
								<u--input
								    border="surround"
									
								  ></u--input>
							</view>
						</view> -->
						<view class="form-item flex">
							<view class="flex m-r-20">
								<view class="label">
									计价数
								</view>
								<view class="value" style="width: 410rpx;">
									<u--input type='number' border="surround" v-model="dataItem.priceQuantity"></u--input>
								</view>
							</view>
							<view class="unit"
								@click="toRoute('/pages/application/pages/information/product-category/components/pricing-unit?type=switch')">
								<text>{{ dataItem.priceUnitName }}</text>
								<u-icon name="arrow-down" size="7" color="ccc"></u-icon>
							</view>
						</view>
						<view class="form-item flex">
							<view class="flex m-r-10">
								<view class="label"></view>
								<view class="value" style="width: 410rpx;">
									<u-checkbox-group v-model="groupValue">
										<u-checkbox shape="circle" label="计价数反算出库数"></u-checkbox>
									</u-checkbox-group>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onCencal">
						取消
					</view>
					<view class="btn" @click="onSave">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			dataItem: {},
			groupValue: []
		}
	},
	watch: {
		// 是否打开picker
		item: {
			handler(newValue, oldValue) {
				this.dataItem = newValue
			},
			immediate: true,
		},
	},
	props: {
		item: {
			type: Object,
			default: {}
		}
	},
	mounted() {
		this.dataItem = this.item

	},
	methods: {
		toRoute(item) {
			this.$Router.push({
				path: item
			})
		},
		onCencal() {
			this.$emit("onPickerCencal")
		},
		onSave() {
			let groupValue = this.groupValue.length == 0 ? false : true
			this.$emit("onPickerSave", { priceQuantity: this.dataItem.priceQuantity, groupValue })
		}
	}
}
</script>

<style lang="scss" scoped>
.popup-view {
	width: 700rpx;
}

.form-view {
	overflow: hidden;
	padding: 0 20rpx;

	.form-item {
		flex: 1;
		padding-bottom: 20rpx;

		.flex {
			align-items: center;
		}

		.label {
			flex: inherit;
			width: 120rpx;
			color: #666;
		}

		.value {
			width: 206rpx;

			.list {
				justify-content: space-between;

				.item {
					width: 76rpx;
					height: 56rpx;
					border: 1rpx solid #ccc;
					border-radius: 6rpx;
					text-align: center;
					line-height: 50rpx;
					// display: flex;
					// align-items: center;
					// justify-content: center;
				}

				.active {
					color: #fff;
					background: #409EFF;
				}
			}
		}

		.u-input {
			padding: 4rpx 9rpx !important;
		}

		.unit {
			width: 120rpx;
			display: flex;
			border: 1rpx solid #ccc;
			padding: 8rpx 8rpx;
			border-radius: 6rpx;
			color: #666;
			justify-content: space-between;

		}
	}
}
</style>